<template>
  <div class="page" v-loading="loading">
    <div style="display: flex;align-items: center;height: 47px;border-bottom: 1px solid #ddd;text-align: center;">
      <div style="flex: 3;border-right: 1px solid #ddd;height: 47px;line-height: 47px;">学校</div>
      <div style="flex: 7;">班级</div>
    </div>
    <div style="display: flex;height: calc(100vh - 105px - 47px);">
      <div style="flex: 3;border-right: 1px solid #ddd;">
        <div style="margin: 15px;">
          <div style="display: flex;justify-content: space-between;margin-bottom: 15px;align-items: center;">
            <div style="font-size: 18px;">学校列表</div>
            <div>
              <el-button type="primary" @click="schoolShow = true"><i class="el-icon-plus"></i> 新增学校</el-button>
            </div>
          </div>
          <div>
            <el-card v-for="item in schoolList" :key="item.schoolName" :class="{active:item.flag}" style="margin-bottom: 10px; position: relative">
              <div style="position: absolute; width: 100%; height:100%; top: 0px; left:0px" @click="selectSchool(item)"></div>
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;">{{item.schoolName}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="isUpdate = true; schoolShow = true; updateSchool(item)">
                  <i class="el-icon-edit"></i> 修改</el-button>
              </div>
              <div style="margin-bottom: 15px;">校训：{{item.schoolMotto}}</div>
              <div>学校描述：{{item.description}}</div>
            </el-card>
          </div>
        </div>
      </div>
      <div style="flex: 7;">
        <div style="margin: 15px;">
          <div style="display: flex;justify-content: space-between;margin-bottom: 15px;align-items: center;">
            <div style="font-size: 18px;">班级列表</div>
            <div>
              <el-input v-model="classContent" v-if="addFlag" placeholder="请输入班级名称" style="width:200px;"></el-input>
              <el-button type="primary" plain @click="addFlag = true" v-if="!addFlag"><i class="el-icon-plus"></i> 新增班级</el-button>
              <el-button type="info" plain @click="addFlag = false" v-if="addFlag"> 取消</el-button>
              <el-button type="primary" plain v-else @click="save({className:classContent,name:classContent, classId:0})" v-if="addFlag">
                <i class="el-icon-circle-check"></i> 保存</el-button>
              <el-button type="danger" plain @click="batchDelete(null)"><i class="el-icon-delete"></i> 批量删除</el-button>
            </div>
          </div>
          <div style="margin-bottom: 15px;">
            <el-table :data="classList" border @select="(item) => {selectList = item;}">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="班级编号" prop="classId"></el-table-column>
              <el-table-column label="班级名称">
                <template slot-scope="scope">
                  <span v-if="!scope.row.updateFlag">{{scope.row.className}}</span>
                  <el-input v-else v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="班级人数" prop="userCount"></el-table-column>
              <el-table-column label="状态" >
                <template slot-scope="scope">
                  <div>
                    <el-tag v-if="!scope.row.isDel" size="mini">显示</el-tag>
                    <el-tag v-else　type="danger" size="mini">不显示</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                  <div>
                    <el-button type="primary" size="mini" @click="scope.row.updateFlag = true" v-if="!scope.row.updateFlag"><i class="el-icon-edit"></i> 修改</el-button>
                    <el-button type="success" size="mini" @click="save(scope.row)" v-else><i class="el-icon-circle-check"></i> 保存</el-button>
                    <el-button type="info" size="mini" v-if="scope.row.updateFlag" @click="scope.row.updateFlag = false"><i class="el-icon-delete" ></i> 取消</el-button>
                    <el-button type="danger" size="mini" v-else @click="batchDelete(scope.row.classId)"><i class="el-icon-delete"></i> 删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="display: flex;justify-content: flex-end;align-items: center;">
            <el-pagination :total="total" :page-size="limit" @current-change="currentChange" @size-change="handleSizeChange"
              background layout="sizes,prev,pager,next,jumper"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="schoolShow" width="40%" :before-close="handleClose" :title="isUpdate ? '更新学校信息':'新增学校信息'">
      <el-form ref="form" :model="schoolObj" label-width="100px">
        <el-form-item label="学校名称:">
          <el-input v-model="schoolObj.schoolName" placeholder="请输入学校名称"></el-input>
        </el-form-item>
        <el-form-item label="学校简章:">
          <el-input type="textarea" v-model="schoolObj.description" placeholder="请输入学校简章"></el-input>
        </el-form-item>
        <el-form-item label="学校校训:">
          <el-input v-model="schoolObj.schoolMotto" placeholder="请输入学校校训" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="schoolShow = false">取 消</el-button>
        <el-button type="primary" @click="submitSchool()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"school",
    data(){
      return {
        schoolShow:false,
        schoolList:[],
        classList:[],
        total:0,
        page:1,
        limit:10,
        loading:false,
        isUpdate:false,
        schoolObj:{
            schoolName:'',
            description:'',
            schoolMotto:''
        },
        selectList:[],
        classUpdate:false,
        schoolId:0,
        addFlag: false,
        classContent:''
      }
    },
    methods:{
      selectSchool(item){
        this.classList = []
         this.schoolList.forEach(schoolList => schoolList.flag = false);
         item.flag = true;
      },
      handleClose(){
        this.isUpdate = false;
        this.schoolObj = {};
      },
      initPage() {
        this.loading = true
        const thizz = this;
        this.classList = [];
        setTimeout(_=>{
          thizz.$get("/school_info/school_list").then(res => {
            if (res.code == 200) {
              res.data.map(item => item.flag = false)
              res.data[0].flag = true
              thizz.schoolList = res.data
            }
            thizz.loading = false
          })
        },300)
      },
      getClass(id) {
        this.schoolId = id;
        this.$get("/school_info/class_list", {
          schoolId: id
        }).then(res => {
          if (res.code === 200) {
            res.data.data.forEach(item => {
              item.updateFlag = false;
              item.name = item.className;
              this.classList.push(item);
            })
            this.total = res.data.count;
          }
        })
      },
      currentChange(page){
        this.page = page
        this.initPage()
      },
      handleSizeChange(limit){
        this.limit = limit
        this.initPage()
      },
      updateSchool(item){
         let abc = this.schoolObj;
         abc.id = item.id; abc.schoolName = item.schoolName; abc.schoolMotto = item.schoolMotto;
         abc.description = item.description;
      },
      submitSchool(){
         this.$post('/school_info/add_update_school', this.schoolObj).then(result => {
           if(result.code === 200){
             this.$message.success(result.data);
             this.initPage()
           }else
             this.$message.warning(result.data);
         })
        this.schoolShow = false;
      },
      save(item){
        if(item.className.length === 0) return this.$message.warning("请填写班级名称");
        item.className = item.name;
        this.$post('/school_info/add_update_class', {className:item.className, classId: item.classId, schoolId: this.schoolId}).then(result => {
           if(result.code == 200) {
             this.$message.success(result.data);
             this.initPage();
             item.updateFlag = false;
             this.addFlag = false;
           }else
             this.$message.warning(result.data);
        });
      },
      batchDelete(classId){
        let ids = null;
        if(classId == null){
          if(this.selectList.length == 0){
            return this.$message.warning("请选择要删除的班级");
          }
          ids = this.selectList.map(item => item.classId).toString();
        }else
          ids = classId;
        this.$confirm("是否要删除这些班级信息??").then(ab => {
          this.$del('/school_info/delete', {ids: ids}).then(result => {
            if(result.code == 200){
              this.$message.success(result.data);
              this.getClass(this.schoolId);
            }else
              this.$message.warning(result.data);
          })
        })
      }

    },
    created() {
      this.initPage()
    },
    watch:{
      schoolList:{
        deep:true,
        handler(newval,oldval){
          this.page = 1
          this.limit = 10
          let select = newval.filter(item => item.flag === true)
          this.getClass(select[0].id)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    border-radius: 8px;
    background-color: #fff;
    min-height: calc(100vh - 105px);
    box-sizing: border-box;
  }
  .active{
    border: 1px solid #ff7800;
  }
</style>
